<template>
  <view class="animated fadeIn faster page-bg">
    <view class="pl-2 d-flex d-flex-middle d-flex-between mb-4 pt-4">
      <view class="d-flex d-flex-middle">
        <view class="d-flex d-flex-column d-flex-center mr-1">
          <image :src="avatar" class="rounded"
                 style="width: 120rpx;height: 120rpx;background-color: #ffffff;"></image>
        </view>
        <view class="d-flex d-flex-column d-flex-item" v-if="loginState">
          <view class="color000 mb-1">
            <view class="font-bold font32 d-flex d-flex-middle d-flex-wrap">{{ nickName }}</view>
            <text v-if="unions_name" class="font26 colorFC6127 mx-1 ">{{ unions_name }}</text>
          </view>
          <!--          <text>{{ phone }}</text>-->
        </view>
        <view v-else class="d-flex d-flex-middle">
          <text class="font32">登录/注册</text>
        </view>
      </view>
      <!--			<view class="color598dfc d-flex d-flex-middle" style="width: 120rpx" v-if="loginState" @click="logout">-->
      <!--				<text class="font26">退出</text>-->
      <!--				<text class="iconfont icon-youjiantou font24 color598dfc"></text>-->
      <!--			</view>-->

      <view class="color666 font28 d-flex d-flex-middle" style="width: 160rpx"
            @click="goUrl('/pages/user-info/user-info')">
        <text>个人设置</text>
        <text class="iconfont icon-youjiantou"></text>
      </view>
    </view>

    <view class="px-2 my-3">
      <view class="pt-3 mycheck d-flex pb-2">
        <view class="d-flex-item d-flex d-flex-column pl-3">
          <view class="d-flex d-flex-middle">
            <text class="iconfont icon-fengefu-shugang font-bold font30 colorf00"></text>
            <text class="font30">收入统计</text>
          </view>
          <view class="d-flex d-flex-baseline color000 pl">
            <text class="font50">{{ balance }}</text>
            <text class="font22">元</text>
          </view>
          <view class="colorhold font24">收入总金额</view>
        </view>
        <view style="width: 160rpx;"></view>
        <view class="d-flex-item d-flex d-flex-column">
          <view class="d-flex d-flex-middle">
            <text class="iconfont icon-fengefu-shugang font30 colorsuccess font-bold"></text>
            <text class="font30">订单统计</text>
          </view>
          <view class="d-flex d-flex-baseline color000 pl">
            <text class="font50">{{ count }}</text>
            <text class="font22">单</text>
          </view>
          <view class="colorhold font24">订单总数量</view>
        </view>
      </view>
    </view>

    <view class="px-2">
      <view class="pt-3 mycheck pb-2">
        <view class="d-flex d-flex-middle mb-2 pl-4">
          <text class="font-bold font30">我的订单</text>
        </view>
        <view class="d-flex d-flex-wrap">
          <view class="d-flex  d-flex-column d-flex-center d-flex-middle mineWidth py-2"
                v-for="(item,index) in inCommonUseList2" :key="index+'3'"
                @click="goUrl(item.url)">
            <image class="mb-1" :src="item.img"></image>
            <text class="font26">{{ item.text }}</text>
          </view>
        </view>
      </view>
    </view>


    <view class="pb-2 mx-2 my-3">
      <view class="pt-3 mycheck pb-2">
        <view class="d-flex d-flex-middle mb-2 px-4">
          <text class="font-bold font30">设置</text>
        </view>
        <view class="d-flex d-flex-wrap">
          <view class="d-flex  d-flex-column d-flex-center d-flex-middle mineWidth py-2"
                v-for="(item,index) in inCommonUseList3" :key="index+'4'" @click="logout">

            <view class="d-flex  d-flex-column d-flex-center d-flex-middle  py-2"
                  v-if="item.click == 'report'">
              <button style="border: none" data-name="shareBtn" open-type="contact"
                      class="d-flex d-flex-center d-flex-column d-flex-middle shareBtn">
                <image class="mb-1" :src="item.img"></image>
                <text class="font26">{{ item.text }}</text>
              </button>
            </view>
            <view class="d-flex  d-flex-column d-flex-center d-flex-middle  py-2" v-else>
              <image v-if="item.img!= ''" class="mb-1" :src="item.img"></image>
              <text v-else class="iconfont icon-Gc_57_public-LogOnOutlined font50 color999 mb-1"></text>
              <text class="font26">{{ item.text }}</text>
            </view>
          </view>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
import {
  mapState
} from "vuex"
import {
  userApi
} from '@/http/userApi.js';
import store from '@/store';

export default {
  data() {
    return {
      inCommonUseList2: [{
        img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/word09.png',
        text: '待服务',
        url: '/pages/order/order?order_type=2&player_order_status=1'
      }, {
        img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/word08.png',
        text: '服务中',
        url: '/pages/order/order?order_type=2&player_order_status=2'
      },
        {
          img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/word10.png',
          text: '已完成',
          url: '/pages/order/order?order_type=2&player_order_status=4'
        },
        {
          img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/word11.png',
          text: '异常订单',
          url: '/pages/order/order?order_type=2&player_order_status=8'
        },
      ],
      inCommonUseList3: [
        {
          img: '',
          text: '登出',
          click: 'logout'
        },
      ],
    }
  },
  computed: {
    ...mapState({
      balance: state => state.balance,
      coupon_count: state => state.coupon_count,
      count_price: state => state.count_price,
      expiration_time: state => state.expiration_time,
      nickName: state => state.nickName,
      user_id: state => state.id,
      loginState: state => state.loginState,
      subscribe: state => state.subscribe,
      phone: state => state.phone,
      avatar: state => state.avatar,
      car_count: state => state.car_count,
      online_status: state => state.online_status,
      unions_name: state => state.unions_name,
      count: state => state.count
    }),
  },
  onShow() {
    userApi.getUserInfo().then((res) => {
      store.commit('setUserInfo', res)
    }).catch((e) => {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    })
  },
  methods: {
    logout() {
      uni.showToast({
        title: '成功退出登录！',
        icon: 'success'
      })
      setTimeout(() => {
        store.commit("logOut")
        uni.reLaunch({
          url: '/pages/login/login'
        })
      }, 1500)
    },
    goUrl(urlPages) {
      if (!this.loginState) {
        uni.showToast({
          title: '未登录，请先登录！',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }, 1500)
      } else {
        uni.navigateTo({
          url: urlPages
        })
      }
    }
  }
}
</script>

<style scoped>
.mycheck {
  border-radius: 20rpx;
  background-color: #fff
}

.mycheck image {
  width: 50rpx;
  height: 50rpx;
}

.mineWidth {
  width: 25%;
}

.color598dfc {
  color: #598dfc;
}

/* 反馈弹窗样式 */
.feedback-popup {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.popup-header {
  padding: 30rpx;
  text-align: center;
  position: relative;
  border-bottom: 2rpx solid #f0f0f0;
}

.close-btn {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 36rpx;
  color: #999;
}

.popup-content {
  max-height: 800rpx;
  overflow-y: auto;
  box-shadow: 0 20rpx 50rpx rgba(0, 0, 0, 0.15);
  border: 2rpx solid rgba(89, 141, 252, 0.2);
}


.image-container {
  margin-bottom: 20rpx;
  text-align: center;
}

.feedback-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
}

.popup-footer {
  padding: 30rpx;
  text-align: center;
  border-top: 2rpx solid #f0f0f0;
}

.card-header {
  padding: 30rpx;
  background: linear-gradient(90deg, #a8ffff 0%, #c8daff 100%);
  color: #333;
}

.confirm-btn {
  width: 100%;
  height: 80rpx;
  background: #598dfc;
  color: #fff;
  border: none;
  border-radius: 40rpx;
  font-size: 32rpx;
}

.colorFC6127 {
  color: #ff7f02;
}

.shareBtn {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  outline: none;
  line-height: normal;
}

.shareBtn::after {
  border: none;
}

.copy-btn {
  font-size: 12px;
  padding: 0 5px;
  color: #598dfc;
  /* #ifdef H5 */
  cursor: pointer;
  /* #endif */
}
</style>
